<template>
  <section class="progress-box">
    <span class="progress-out inline-block pr">
      <i class="pa inline-block progress-in"
         :style="{width:value + '%'}"
      >{{value}}%</i>
    </span>
  </section>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {}
    },
    props:['value'],
    methods: {},
  }
</script>

<style scoped lang="scss">
  @import '../assets/css/base.scss';

  .progress-box {
    width: 100%;
    height: 100%;

    .progress-out{
      background-color: #FFECD1;
      width: 100%;
      height: 100%;
      border-radius: 6px;

      .progress-in{
        top:0;
        left:0;
        height: 12px;
        background: -webkit-linear-gradient(right,#FF6D97,#F54E4E);
        width: 20px;
        font-size: 9px;
        color: #fff;
        border-radius: 6px;
        font-style: normal;
        text-indent:4px;
      }
    }
  }

</style>
